<template>
  <div class="cart-box">
    <div class="goods-list">
      <div v-if="goodsList.length">
        <div v-for="(shop,index1) in shopList"
             :key="index1"
             class="shop-item"
             :class="shop.shopChecked?'shop-item-checked':''">
          <div class="shop-name">
            <input type="checkbox"
                   class="check-box"
                   v-model="shop.shopChecked"
                   @change="checkShop(shop.shopChecked,index1)">
            <span>{{ shop.name }}</span>
          </div>
          <div v-for="(goodsInfo,index2) in shop.goods"
               :key="index2"
               class="goods-item"
               :class="goodsInfo.goodsChecked?'goods-item-checked':'goods-item-nocheck'">
            <div class="goods-block">
              <input type="checkbox"
                     class="check-box"
                     v-model="goodsInfo.goodsChecked"
                     @change="checkGoods(goodsInfo.goodsChecked,index1)">
            </div>
            <div class="goods-block">
              <img :src="goods[goodsInfo.id].poster" alt="预览缩略" class="goods-img">
            </div>
            <a class="goods-block goods-name">
              {{ goods[goodsInfo.id].text }}
            </a>
            <div class="goods-block goods-info">
            </div>
            <div class="goods-block goods-price">
              <p style="text-decoration:line-through;">￥{{ goods[goodsInfo.id].price }}</p>
              <p style="font-weight:bold;">￥{{ goods[goodsInfo.id].onlinePrice }}</p>
            </div>
            <div class="goods-block goods-count">
              <div class="count-btn" @click="()=>{if(goodsInfo.count>1){goodsInfo.count--}}">-</div>
              <input class="count-input" v-model="goodsInfo.count">
              <div class="count-btn" @click="()=>{goodsInfo.count++}">+</div>
            </div>
            <div class="goods-block goods-total">
              <p style="text-decoration:line-through;color:red;">￥{{ goods[goodsInfo.id].price * goodsInfo.count }}</p>
              <p style="font-weight:bold;color:red;">￥{{ goods[goodsInfo.id].onlinePrice * goodsInfo.count }}</p>
            </div>
            <div class="goods-block goods-action">
              <button class="act-btn" @click="starGoods(goodsInfo.id)">收藏此商品</button>
              <button class="act-btn" @click="deleteGoods(goodsInfo.id)">删除</button>
              <button class="act-btn" @click="testClick(goodsInfo.id)">相似商品</button>
            </div>
          </div>
        </div>
        <div class="to-purchase">
          <span>总价：￥{{ totalPurchase }}</span>
          <button class="btn-active"
                  :disabled="totalPurchase===0"
                  @click="toPurchase">结算
          </button>
        </div>
      </div>
      <div v-else>
        <div class="goods-empty">
          <p>购物车空空如也</p>
          <p>去添加心仪的商品吧</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import config from "@/config/config"
export default {
  name: "Cart",
  data () {
    return {
      goods: config.goods,
      goodsList: [],
      shopList: [],
      selectedGoods: [],
    }
  },
  mounted () {
    this.goodsList = JSON.parse(sessionStorage.getItem("goodsList"))
    this.getShopList()
  },
  methods: {
    getShopList () {
      if (this.goodsList) {
        this.shopList = []
        this.goodsList.forEach(item => {
          let shop = this.goods[item.id].shop
          let index = this.shopList.findIndex(x => x.name === shop)
          if (index === -1) {
            this.shopList.push({
              name: shop,
              goods: [{
                ...item,
                goodsChecked: false,
              }],
              shopChecked: false,
            })
          } else {
            this.shopList[index].goods.push({
              ...item,
              goodsChecked: false,
            })
          }
        })
        console.log(this.shopList)
      }
    },
    checkShop (change, index) {
      this.shopList[index].goods.forEach(item => {
        item.goodsChecked = change
      })
    },
    checkGoods (change, index) {
      let sum = 0
      this.shopList[index].goods.forEach(item => {
        if (item.goodsChecked) { sum++ }
      })
      if (sum === this.shopList[index].goods.length) {
        this.shopList[index].shopChecked = 1
      } else {
        this.shopList[index].shopChecked = 0
      }
    },
    toPurchase () {
      this.selectedGoods = []
      this.shopList.forEach(item => {
        if (item.shopChecked) {
          this.selectedGoods.push({
            name: item.name,
            goods: [],
          })
          item.goods.forEach(goods => {
            if (goods.goodsChecked) {
              this.selectedGoods[this.selectedGoods.length - 1].goods.push({
                id: goods.id,
                count: goods.count,
              })
            }
          })
        }
      })
      console.log(this.selectedGoods)
    },
    deleteGoods (id) {
      if (confirm("确认要删除该商品？")) {
        this.goodsList.splice(this.goodsList.findIndex(x => x.id === id), 1)
        this.getShopList()
        sessionStorage.setItem('goodsList', JSON.stringify(this.goodsList))
      }
    },
    starGoods (id) {
      if (confirm("确认要收藏该商品？")) {
        let stars = JSON.parse(sessionStorage.getItem('stars'))
        if (stars) {
          if (stars.indexOf(id) === -1){
            stars.push(id)
          }
        } else {
          stars = [id]
        }
        console.log(stars)
        sessionStorage.setItem('stars', JSON.stringify(stars))
      }
    },
    testClick (val) {
      console.log(val)
    },
  },
  computed: {
    totalPurchase () {
      let sum = 0
      this.shopList.forEach(item => {
        item.goods.forEach(goods => {
          if (goods.goodsChecked) {
            sum += goods.count * this.goods[goods.id].onlinePrice
          }
        })
      })
      return sum
    }
  }
}
</script>
<style scoped>
.cart-box{}
.goods-list{}
.check-box{
  height: 16px;
  width: 16px;
  margin: 0;
  position: absolute;
  top: 10px;
  z-index: 2;
  cursor: pointer;
}
.shop-item{
  margin-bottom: 16px;
}
.shop-item-checked{
  background-color: coral;
}
.shop-name{
  text-align: left;
  font-weight: bold;
  font-size: 20px;
  position: relative;
  line-height: 100%;
  padding: 8px;
  border: 2px solid tomato;
  border-bottom-width: 1px;
}
.shop-name span{
  margin-left: 40px;
}
.goods-item{
  height: 80px;
  display: flex;
  border: 1px solid darkorange;
  padding-left: 16px;
}
.goods-item-checked{
  background-color: lightsalmon;
}
.goods-item-nocheck{
  background-color: white;
}
.goods-block{
  position: relative;
  margin: 4px 8px;
}

.goods-img{
  height: 100%;
  width: 80px;
  margin-left: 24px;
}
.goods-name{
  font-size: 14px;
  width: 20%;
  height: 60px;
  margin-top: 10px;
  text-align: left;
  overflow: hidden;
}
.goods-info{}
.goods-price{
  text-align: left;
  width: 7%;
  margin-top: 16px;
  padding-left: 3%;
}
.goods-count{
  display: flex;
  width: 15%;
  padding-top: 20px;
}
.count-btn{
  width: 32px;
  height: 32px;
  line-height: 32px;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  text-align: center;
}
.count-input{
  font-size: 18px;
  width: 50px;
  height: 28px;
  padding: 0 8px;
  text-align: right;
}
.goods-total{
  margin-top: 16px;
  width: 5%;
}
.goods-action{
  margin: 9px 5% 9px auto;
}
.act-btn{
  display: block;
  border: 0;
  background-color: transparent;
  cursor: pointer;
}
.to-purchase{
  text-align: right;
}
.to-purchase span{
  margin-right: 32px;
  font-size: 20px;
  font-weight: bold;
  color: red;
}
.btn-active{
  border-radius: 2px;
  border: 0;
  background-color: brown;
  color: white;
  cursor: pointer;
  font-size: 24px;
  padding: 8px 16px;
}
.btn-active:disabled{
  background-color: grey;
  color: white;
  cursor: not-allowed;
}
.goods-empty{
  padding-top: 120px;
  padding-left: 360px;
  text-align: left;
  font-size: 24px;
}
</style>